<template>
	<view class="rd-image yb-flex" ref="rdImage" @tap="handlePreviewImage" :style="{
		'height': mode == 'widthFix' && minHeight ? (!ready ? minHeight + 'rpx' : realHeight + 'px') : ''
	}">
		<yb-image
		@load="onLo"
		@error="onErr"
		:lazyLoad="lazyLoad"
		:borderRadius="borderRadius"
		:borderTopLeftRadius="borderTopLeftRadius"
		:borderTopRightRadius="borderTopRightRadius"
		:borderBottomRightRadius="borderBottomRightRadius"
		:borderBottomLeftRadius="borderBottomLeftRadius"
		:defaultSrc="defaultSrc"
		:waterfall="waterfall"
		:src="url"
		:mode="mode"
		:options="{
			bgColor: bgColor || skinColor.color_gap_1
		}"
		custom-class="yb-flex-1">
			<template slot="loading">
				<rd-icon name="image" :color="tipColor || skinColor.color_1" :size="tipSize"></rd-icon>
			</template>
			<template slot="error">
				<rd-icon name="image" :color="tipColor || skinColor.color_1" :size="tipSize"></rd-icon>
			</template>
		</yb-image>
		<view class="img-mask" :style="imageStyle" v-if="enableMask"></view>
	</view>
</template>

<script>
	import appMixin from '@/common/mixin/app.js'
	export default {
		mixins: [appMixin],
		props: {
			//图片链接
			src: {
				type: String,
				default: ''
			},
			//裁剪模式
			mode: {
				type: String,
				default: ''
			},
			//懒加载
			lazyLoad: {
				type: Boolean,
				default: false
			},
			//开启瀑布流
			waterfall: {
				type: Boolean,
				default: false
			},
			//是否打开夜间模式遮罩层
			enableMask: {
				type: Boolean,
				default: true
			},
			//圆角大小
			borderRadius: {
				type: [Number, String],
				default: 0
			},
			borderTopLeftRadius: {
				type: [Number,String],
				default: 0
			},
			borderTopRightRadius: {
				type: [Number,String],
				default: 0
			},
			borderBottomRightRadius: {
				type: [Number,String],
				default: 0
			},
			borderBottomLeftRadius: {
				type: [Number,String],
				default: 0
			},
			//图片加载失败展示的默认图片
			defaultSrc: {
				type: String,
				default: ''
			},
			//开启高斯模糊
			enableBlur: {
				type: Boolean,
				default: false
			},
			//高斯模糊配置
			blur: {
				type: Object,
				default () {
					return {
						scale: 0.5,//尺寸比例
						radius: 10//半径
					}
				}
			},
			tipSize: {
				type: [Number,String],
				default: 100
			},
			tipColor: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: ''
			},
			referer: {
				type: String,
				default: ''
			},
			preview: {
				type: Boolean,
				default: false
			},
			minHeight: {
				type: [String,Number],
				default: ''
			}
		},
		data () {
			return {
				url: '',
				isReferer: false,
				loading: false,
				ready: false,
				realHeight: 0
			}
		},
		computed: {
			maskOpac () {
				return this.skinMode == 'night' ? 0.2 : 0
			},
			imageStyle () {
				return Object.assign({}, {
					opacity: this.maskOpac
				}, this.mode != 'aspectFit' ? this.borderRadiusStyle : {} )
			},
			borderRadiusStyle () {
				return this.borderRadius > 0 ? {
					borderRadius: this.app.$utils.pixelunit(this.borderRadius)
				} : {
					borderTopLeftRadius: this.app.$utils.pixelunit(this.borderTopLeftRadius),
					borderTopRightRadius: this.app.$utils.pixelunit(this.borderTopRightRadius),
					borderBottomRightRadius: this.app.$utils.pixelunit(this.borderBottomRightRadius),
					borderBottomLeftRadius: this.app.$utils.pixelunit(this.borderBottomLeftRadius)
				}
			}
		},
		created() {
			if ( this.src ) { this.url = this.src }
		},
		methods: {
			blurImage (src) {
				return new Promise(resolve => {
					const url = src.indexOf('http') > -1 ? encodeURI(src) : plus.io.convertLocalFileSystemURL(src)
					const BlurImage = uni.requireNativePlugin('YingBingNativePlugin-BlurImage');
					const base64 = BlurImage.blur(url, this.blur.scale, this.blur.radius) || null;
					if ( base64 ) {
						base64ToPath(base64)
							.then(path => {
								this.$store.dispatch('cache/addCache', {
									id: this.src + '_blur',
									src: path,
									type: 'image'
								})
								resolve(path)
							})
							.catch(error => {
								resolve(false)
							})
					} else {
						resolve(false)
					}
				})
			},
			onLo(e) {
				this.$emit('load', e);
				if ( this.mode == 'widthFix' && this.minHeight && !this.realHeight ) {
					this.$nextTick(function () {
						uni.requireNativePlugin('dom').getComponentRect(this.$refs.rdImage, res => {
							const rate = res.size.width / e.detail.width
							this.realHeight = e.detail.height * rate
							this.ready = true
						})
					})
				} else this.ready = true
			},
			onErr(e) {
				if ( !this.isReferer && this.src ) {
					this.isReferer = true
					this.loading = true
					this.app.$business.selectReferer(this.src, false, this.referer).then(src => {
						this.url = src
						this.loading = false
					})
				} else {
					this.$emit('error', e);
				}
			},
			handlePreviewImage () {
				if( !this.preview || this.loading || !this.url ) return
				this.app.$business.previewImage({
					urls: [this.url]
				})
			}
		},
		watch: {
			src (newVal) {
				this.ready = false
				if ( newVal ) {
					this.url = newVal
				}
			}
		}
	}
</script>

<style scoped>
	.rd-image {
		transition: height .2s;
	}
	.img-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000000;
	}
</style>
